<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>分析生命周期</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="root" :x="n">
      <h2 v-text="n"></h2>
      <h2>当前的n值是：{{n}}</h2>
      <button @click="add">点我n+1</button>
      <button @click="bye">点我销毁vm</button>
    </div>
  </body>

  <script type="text/javascript">
    Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。

    new Vue({
      el: '#root',
      // template:`
      // 	<div>
      // 		<h2>当前的n值是：{{n}}</h2>
      // 		<button @click="add">点我n+1</button>
      // 	</div>
      // `,
      data: {
        n: 1,
      },
      methods: {
        add() {
          console.log('add');
          this.n++;
        },
        bye() {
          console.log('bye');
          this.$destroy();
        },
      },
      watch: {
        n() {
          console.log('n变了');
        },
      },
      beforeCreate() {
        console.log('beforeCreate');
      },
      created() {
        console.log('created');
      },
      beforeMount() {
        console.log('beforeMount');
      },
      mounted() {
        console.log('mounted');
      },
      beforeUpdate() {
        console.log('beforeUpdate');
      },
      updated() {
        console.log('updated');
      },
      beforeDestroy() {
        console.log('beforeDestroy');
      },
      destroyed() {
        console.log('destroyed');
      },
    });
  </script>
</html>
